<script setup>
import { ref, defineAsyncComponent } from 'vue';

const OurScores = defineAsyncComponent(() => import('../../components/OurScoresModal.vue'))
const isOpenModal = ref(false)
function openModal() {
    isOpenModal.value = true;
}

function closeModal()  {
    isOpenModal.value = false;
}


</script>

<template>
    <div class="view-instructor-comments-container" >

        <div class="view-instructor-comments" >
            <div class="comments-container" >
                <div class="title" >
                    <p>团队总评</p>
                </div>
                <div class="mark">
                    <button type="button" @click="openModal" >查看成绩总览</button>
                </div>
                <div class="content" >
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida
                dolor sit amet lacus
                accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis
                dis parturient
                montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis
                orci, sed rhoncus pronin
                sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
                laoreet. Proin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
                Proin gravida dolor sit amet lacus
                accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis
                dis parturient</p>
                </div>
                <div class="score" >
                    <p>团队得分</p>
                    <span>98</span>
                </div>
            </div>
            <div class="comments-container" >
                <div class="title" >
                    <p>个人评价</p>
                </div>
                <div class="content" >
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida
                dolor sit amet lacus
                accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis
                dis parturient
                montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis
                orci, sed rhoncus pronin
                sapien nunc accuan eget.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum
                laoreet. Proin Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.
                Proin gravida dolor sit amet lacus
                accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis
                dis parturient</p>
                </div>
                <div class="score" >
                    <p>个人得分</p>
                    <span>98</span>
                </div>
            </div>
        </div>
        <OurScores v-if="isOpenModal" :is-open-modal="isOpenModal" @close-modal="closeModal" />
    </div>
</template>


<style scoped>
.view-instructor-comments-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.view-instructor-comments {
    background-color: #ffffff;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
        width: 1057px;
    margin: 50px 0;
    padding: 30px;
}

.comments-container {
    display: grid;
    grid-template-areas: "title mark" 
    "content score";
    row-gap: 24px;
    column-gap: 39px;
    grid-template-columns: auto 160px;
    margin-bottom: 34px;
}

.comments-container > .title {
    grid-area: title;
}

.comments-container > .title > p {
	font-family: Source Han Sans CN;
	font-size: 30px;
	font-weight: bold;
	line-height: 30px;
	color: #707070;
}

.comments-container > .title > p::after {
    content: ": "
}

.comments-container > .mark {
    grid-area: mark;
}

.comments-container > .mark > button {
    width: 160px;
    height: 36px;
    background-color: #8493a6;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    border: none;
    border-radius: 6px;
    color: #fafafa;
    text-align: center;
    cursor: pointer;
    line-height: 36px;
    font-size: 18px;
    padding: 0;
    font-family: Source Han Sans CN;
    user-select: none;
    transition: transform 0.1s;
}

.comments-container > .mark > button:hover  {
    opacity: 0.85;
}

.comments-container > .mark > button:active  {
    transform: translateY(3px);
}

.comments-container > .content {
    grid-area: content;
    background-color: #e2e2e2;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
    padding: 17px 21px;
}

.comments-container > .content > p {
	font-family: Source Han Sans CN;
	font-size: 18px;
	line-height: 31px;
	color: #707070;
    height: 208px;
    overflow: auto;

}

.comments-container > .score {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    grid-area: score;
    background-color: #e4e7ed;
	box-shadow: 0px 3px 6px 0px 
		rgba(0, 0, 0, 0.16);
}

.comments-container > .score > p {
	font-family: Source Han Sans CN;
	font-size: 20px;
	font-weight: bold;
	line-height: 20px;
	color: #707070;
    margin-bottom: 30px;
}

.comments-container > .score > span {
    display: block;
    font-family: Source Han Sans CN;
	font-size: 28px;
	font-weight: bold;
	line-height: 28px;
	color: #707070;
}

.comments-container > .score > p:first-of-type::after {
    content: ": ";
}



</style>